<template>
  <div class="meet-view">
    <div class="screen_box">
      <div class="tip-right">
        <div class="li-tip">
          <span class="start"></span>
          表示会议待开始
        </div>
        <div class="li-tip">
          <span class="run"></span>
          表示会议进行中
        </div>
        <div class="li-tip">
          <span class="end"></span>
          表示会议已结束
        </div>
      </div>
    </div>
    <div class="list_con">
      <div class="pageBody" ref="pageBody">
        <div class="change_btn">
          <div class="up el-icon-arrow-left" @click="monthChange('up')"></div>
          <div class="none" @click="monthChange('now')">YYYY年MM月</div>
          <div class="down el-icon-arrow-right" @click="monthChange('down')"></div>
        </div>
        <el-calendar id="calendar" v-model="calendarTime" :first-day-of-week="7" class="el_calendar1">
          <template slot="dateCell" slot-scope="{ data }">
            <div
              class="full_height"
              :class="{
                is_ready: readyData(handleSelected(data.day)),
                is_end: endData(handleSelected(data.day)),
                is_run: runData(handleSelected(data.day)),
              }">
              <div class="calendar_day">
                {{ data.day.split('-').slice(2).join('-') }}
              </div>
              <div class="calendar_content">
                <div class="calendar_c_body">
                  <div v-for="item in handleSelected(data.day).info" :key="item.id">
                    <div v-if="handleSelected(data.day).info.length === 1">{{ getDayInfo(item) }}</div>
                    <div v-else class="body_con pre_line" :title="getDayInfo(item)">{{ getDayInfo(item) }}</div>
                  </div>
                </div>
              </div>
            </div>
          </template>
        </el-calendar>
      </div>
    </div>
  </div>
</template>

<script>
import { getlistMeetingPages } from '@apis/meeting.js'
import moment from 'moment'
moment.locale('zh-cn')
export default {
  name: 'meetingView',
  components: {},
  props: {},
  data() {
    return {
      calendarTime: new Date(),
      tableData: [],
    }
  },
  computed: {},
  filters: {},
  watch: {},
  created() {},
  mounted() {
    this.getData()
  },
  methods: {
    monthChange(type) {
      /* eslint-disable */
      let month = '',
        monthStart = '',
        monthEnd = ''
      if (type === 'up') {
        month = moment(this.calendarTime).subtract(1, 'month').format('YYYY-MM')
      } else if (type === 'down') {
        month = moment(this.calendarTime).add(1, 'month').format('YYYY-MM')
      } else {
        return
      }
      monthStart = moment(month).startOf('month').format('YYYY-MM-DD')
      monthEnd = moment(month).endOf('month').format('YYYY-MM-DD')
      this.calendarTime = new Date(month)
      this.getData()
    },
    getData() {
      const param = {
        current: 1,
        size: 1100,
        startTime: moment(this.calendarTime).startOf('month').format('YYYY-MM-DD'),
        endTime: moment(this.calendarTime).endOf('month').format('YYYY-MM-DD'),
        fuzzyQuery: '',
        tenantId: localStorage.pskh_tenantId,
        meetingStatus: '2,3,4',
      }
      getlistMeetingPages(param).then(res => {
        this.tableData = res.data.records
      })
    },
    handleSelected(day) {
      let flag = {} // 默认显示为0
      const idList = []
      const info = []
      this.tableData.forEach(item => {
        if (['2', '3', '4'].includes(item.meetingStatus)) {
          const time1 = moment(item.meetingTime.slice(0, 10)).format('YYYYMMDD000000')
          const time2 = moment(item.meetingTime.slice(17, 27)).format('YYYYMMDD235959')
          const time = moment(day).format('YYYYMMDD000000')
          if (time >= time1 && time < time2) {
            flag = item
          }
          flag.day = day
          if (flag.id && !idList.includes(flag.id)) {
            idList.push(flag.id)
            info.push(flag)
          }
        }
      })
      const obj = {
        day: day,
        info: info,
      }
      return obj
    },
    readyData(data) {
      if (!data.info.length) return false
      if (!data.info[0].meetingTime) return false
      const meetingTime = data.info[0].meetingTime.split('~')
      const startTime = moment(meetingTime[0]).format('YYYYMMDDHHmmss')
      const time = moment().format('YYYYMMDDHHmmss')
      return startTime > time
    },
    endData(data) {
      if (!data.info.length) return false
      if (!data.info[0].meetingTime) return false
      const meetingTime = data.info[0].meetingTime.split('~')
      const endTime = moment(meetingTime[1]).format('YYYYMMDDHHmmss')
      const time = moment().format('YYYYMMDDHHmmss')
      return endTime < time
    },
    runData(data) {
      if (!data.info.length) return false
      if (!data.info[0].meetingTime) return false
      const meetingTime = data.info[0].meetingTime.split('~')
      const startTime = moment(meetingTime[0]).format('YYYYMMDDHHmmss')
      const endTime = moment(meetingTime[1]).format('YYYYMMDDHHmmss')
      const time = moment().format('YYYYMMDDHHmmss')

      return startTime < time && time < endTime
    },
    getDayInfo(item) {
      let str = ''
      const arr = item.meetingTime.split('~')
      let arrT = []
      arr.forEach(item => {
        const arrLi = item.split(' ')
        arrT.push(arrLi[1].slice(0, 5))
      })
      str = arrT[0] + '~' + arrT[1] + ' ' + item.meetingName
      return str
    },
  },
}
</script>

<style lang="scss" scoped>
.meet-view {
  height: 100%;
  position: relative;
  .screen_box {
    padding: 0 20px;
    height: 40px;
    line-height: 40px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 99;
    .tip-right {
      display: flex;
      align-items: center;
      .li-tip {
        display: flex;
        align-items: center;
        margin-right: 25px;
        span {
          width: 32px;
          height: 20px;
          margin-right: 5px;
          // opacity: 0.8;
        }
        .start {
          background-color: #f56c6c;
        }
        .run {
          background-color: #e6a23c;
        }
        .end {
          background-color: #67c23a;
        }
      }
    }
  }
  .list_con {
    height: 100%;
    margin-top: 10px;
    width: 100%;
    .pageBody {
      padding: 0 15px;
      height: 100%;
      flex: 1;
      width: 100%;
      position: relative;
      .change_btn {
        position: absolute;
        font-size: 22px;
        left: 50%;
        top: 2px;
        transform: translateX(-50%);
        color: #333333;
        padding: 12px 20px 12px;
        display: flex;
        align-items: center;
        cursor: pointer;
        div {
          margin: 0 20px;
        }
        .none {
          opacity: 0;
        }
        .up,
        .down {
          font-size: 26px;
        }
      }
      .el_calendar1 {
        height: 100%;
        /deep/ .el-calendar__body {
          height: calc(100% - 50px);
          overflow-y: auto;
          position: relative;
        }
        /deep/.el-calendar-table .el-calendar-day {
          height: 95px;
          min-height: 60px;
          overflow-y: auto;
          position: relative;
          padding: 0;
          &::-webkit-scrollbar {
            width: 0px;
            height: 0px;
            border-radius: 0px;
          }
        }
        /deep/ .el-calendar__header {
          justify-content: center;
          font-size: 22px;
          // padding-top: 0;
          .el-calendar__title {
            font-size: inherit;
          }
        }
        /deep/ .el-calendar__button-group {
          display: none;
        }
        /deep/ .el-calendar-table {
          // width: 100%;
          // height: 100%;
          &:not(.is-range) {
            td.next {
              pointer-events: none;
            }
            td.prev {
              pointer-events: none;
            }
          }
        }
        /deep/.el-calendar-table thead th:before {
          content: '星期';
        }
      }
      .full_height {
        padding: 8px;
        .calendar_day {
          height: 25%;
        }
        .calendar_content {
          height: 75%;
          width: 100%;
          overflow: hidden;
          .calendar_c_body {
            height: 100%;
            overflow-y: auto;
            .body_con {
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 2;
            }
          }
        }
        &.is_ready {
          background-color: #f56c6c;
          .calendar_day {
            color: #ffffff;
          }
          .calendar_c_body {
            color: #ffffff;
          }
        }
        &.is_end {
          background-color: #67c23a;
          .calendar_day {
            color: #ffffff;
          }
          .calendar_c_body {
            color: #ffffff;
          }
        }
        &.is_run {
          background-color: #e6a23c;
          .calendar_day {
            color: #ffffff;
          }
          .calendar_c_body {
            color: #ffffff;
          }
        }
      }
    }
  }
}
</style>
